<template>
  <div style="width: 500px;margin: 10px auto;">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"  label-width="120px">
    <el-form-item label="课程id" prop="courseId">
      <el-input v-model="dataForm.courseId" readonly placeholder="课程id"></el-input>
    </el-form-item>
    <el-form-item label="课程名" prop="courseName">
      <el-input v-model="dataForm.courseName" readonly placeholder="课程名"></el-input>
    </el-form-item>
    <el-form-item label="开始座位号" prop="seatNumber">
      <el-input v-model="dataForm.seatNumber"  placeholder="开始座位号"></el-input>
    </el-form-item>
    <el-form-item label="考场开始学号" prop="startStu">
      <el-select filterable class="select" v-model="dataForm.startStu" @change="changeBuilder" placeholder="请选择起始学生">
          <el-option  v-for="item in studentList" :key="item.sid" :label="(item.sid +'-'+ item.name)" v-html="item.name" :value="item.sid"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="考场结束学号" prop="endStu">
      <el-select filterable class="select" v-model="dataForm.endStu" @change="changeBuilder" placeholder="请选择起始学生">
          <el-option  v-for="item in studentList" :key="item.sid" :label="(item.sid +'-'+ item.name)" v-html="item.name" :value="item.sid"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="教室" prop="roomId">
      <el-row >
        <el-col :span="11">
            <el-select filterable class="select" v-model="build" @change="changeBuilder" placeholder="请选择楼栋">
                <el-option  v-for="item in buildList" :key="item.id" :label="item.roomNumber" :value="item.id"></el-option>
            </el-select>
        </el-col>
        <el-col :span="2">
            <div style="fontSize:14px;line-height: 40px; text-align: center;"> :</div>
        </el-col>
        <el-col :span="11">
            <el-select filterable  class="select" v-model="dataForm.roomId" placeholder="请选择教室" >
                <el-option v-for="item in roomList" :key="item.id" :label="item.parentName+'-'+item.roomNumber" :value="item.id"></el-option>
            </el-select>
        </el-col>
    </el-row>
    </el-form-item>
    <el-form-item label="考试时间" prop="time">
      <el-input v-model="dataForm.time" placeholder="请输入开始时间-结束时间"></el-input>
    </el-form-item>
    <el-form-item label="监考老师" prop="invigilator">
      <el-input v-model="dataForm.invigilator" placeholder="监考老师"></el-input>
    </el-form-item>
    <el-form-item label="学期" prop="semester">
      <el-input v-model="dataForm.semester" placeholder="学期"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </div>

</template>

<script>
import { roomApi } from '@/api/baseinfo';
import { examinationarrangementApi } from '@/api/course'
import { studentApi } from '@/api/student';
import { getSemester } from '@/utils';


  export default {
    data () {
      return {
        studentList:[],
        roomList:[],
        buildList:[],
        build:'',
        dataForm: {
          courseId: '',
          courseName: '',
          seatNumber: '',
          startStu: '',
          endStu: '',
          roomId:'',
          time:'',
          roomName:'',
          invigilator: '',
          semester: ''
        },
        dataRule: {
          courseId: [
            { required: true, message: '课程id不能为空', trigger: 'blur' }
          ],
          startStu: [
            { required: true, message: '开始学生不能为空', trigger: 'blur' }
          ],
          seatNumber: [
            { required: true, message: '教室不能为空', trigger: 'blur' }
          ],
          endStu: [
            { required: true, message: '结束学生不能为空', trigger: 'blur' }
          ],
          roomId:[
            { required: true, message: '房间不能为空', trigger: 'blur' }
          ],

          time: [
            { required: true, message: '考试时间不能为空', trigger: 'blur' }
          ],
          invigilator: [
            { required: true, message: '监考老师不能为空', trigger: 'blur' }
          ],
          semester: [
            { required: true, message: '学期不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (row) {
        console.log(row);

        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.dataForm.courseId = row.courseId
          this.dataForm.courseName = row.courseName
          this.dataForm.semester = getSemester()
        })
        studentApi.listName()
        .then(({data})=>{
          this.studentList = data
          return
        })
        .then(()=>{
          roomApi.listbuild().then(({data})=>{
                this.buildList=data
                return
            })
        })


      },
      changeBuilder(){
        roomApi.listClassroomNoPage({parentId:this.build})
        .then(({data})=>{
            this.roomList = data
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            examinationarrangementApi.arrangment(this.dataForm)
            .then(() => {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            })
          }
        })
      }
    }
  }
</script>
